<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>漂浮消息</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
</head>

<body>
    <div id="page" class="">
        <div id="pageBody" class="scrollbar-hover">
            <div class="container">
                <div id="pageContent">
                    <section class="">
                        <article>
                            <p>漂浮消息可以设置图标，并且可以决定是否显示关闭按钮。</p>
                            <div class="example">
                                <button class="btn btn-primary show-messager" type="button" data-content="这是一个浮动消息。" data-icon="bell" data-time="100000">显示漂浮消息</button>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>显示位置</h3>
                        </header>
                        <article>
                            <p>提供7个预设的显示位置。</p>
                            <div class="example">
                                <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="top">上方</button>
                                <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="bottom">下方</button>
                                <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="top-left">左上</button>
                                <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="top-right">右上</button>
                                <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="bottom-left">左下</button>
                                <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="bottom-right">右下</button>
                                <button class="btn show-messager" type="button" data-content="Hello!" data-icon="heart" data-placement="center">中间</button>
                            </div>
                        </article>
                    </section>
                    <section class="">
                        <header>
                            <h3>颜色主题</h3>
                        </header>
                        <article>
                            <p>提供 8 种预设颜色主题。</p>
                            <div class="example">
                                <style>
                                    .messager-example {
                                        position: relative;
                                        margin-bottom: 10px;
                                        cursor: pointer;
                                    }
                                </style>
                                <div class="messager messager-example messager-default">
                                    <div class="messager-content">普通提示消息</div>
                                    <div class="messager-actions">
                                        <button type="button" class="close action">×</button>
                                    </div>
                                </div>
                                <div class="messager messager-example messager-primary" data-type="info">
                                    <div class="messager-content">提示消息：主要</div>
                                    <div class="messager-actions">
                                        <button type="button" class="close action">×</button>
                                    </div>
                                </div>
                                <div class="messager messager-example messager-info" data-type="info">
                                    <div class="messager-content">
                                        <i class="icon-info-sign"></i> 提示消息：信息</div>
                                    <div class="messager-actions">
                                        <button type="button" class="close action">×</button>
                                    </div>
                                </div>
                                <div class="messager messager-example messager-danger" data-type="danger">
                                    <div class="messager-content">
                                        <i class="icon-exclamation-sign"></i>提示消息：危险</div>
                                    <div class="messager-actions">
                                        <button type="button" class="close action">×</button>
                                    </div>
                                </div>
                                <div class="messager messager-example messager-success" data-type="success">
                                    <div class="messager-content">
                                        <i class="icon-ok-sign"></i> 提示消息：成功</div>
                                    <div class="messager-actions">
                                        <button type="button" class="close action">×</button>
                                    </div>
                                </div>
                                <div class="messager messager-example messager-warning" data-type="warning">
                                    <div class="messager-content">
                                        <i class="icon-warning-sign"></i> 提示消息：警告</div>
                                    <div class="messager-actions">
                                        <button type="button" class="close action">×</button>
                                    </div>
                                </div>
                                <div class="messager messager-example messager-important" data-type="important">
                                    <div class="messager-content">提示消息：重要</div>
                                    <div class="messager-actions">
                                        <button type="button" class="close action">×</button>
                                    </div>
                                </div>
                                <div class="messager messager-example messager-special" data-type="special">
                                    <div class="messager-content">提示消息：特别</div>
                                    <div class="messager-actions">
                                        <button type="button" class="close action">×</button>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>自定义操作按钮</h3>
                        </header>
                        <article>
                            <div class="example">
                                <button class="btn btn-primary show-messager" type="button" data-fade="false" data-scale="false" data-content="此消息无法关闭，5秒后自动关闭"
                                    data-time="5000" data-close="false">禁用关闭按钮</button>
                            </div>
                            <div class="example">
                                <div class="messager messager-example messager-success" data-type="success" data-actions="{&quot;cancel&quot;: {&quot;icon&quot;: &quot;undo&quot;, &quot;text&quot;: &quot;撤销&quot;}}">
                                    <div class="messager-content">
                                        <i class="icon-ok-sign"></i> 你的邮件已成功发送。</div>
                                    <div class="messager-actions">
                                        <button type="button" class="action action-cancel">
                                            <i class="icon-undo"></i> 撤销</button>
                                        <button type="button" class="close action">×</button>
                                    </div>
                                </div>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>禁用动画效果</h3>
                        </header>
                        <article>
                            <div class="example">
                                <button class="btn btn-primary show-messager" type="button" data-fade="false" data-scale="false" data-content="此消息没有动画效果。"
                                    data-icon="bell">禁用动画效果</button>
                            </div>
                        </article>
                    </section>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
    <script>
        $('.show-messager').on('click', function () {

            var $this = $(this);
            var data = $this.data('zui.messager');
            if (data) {
                data.show(new Date());
            }
            else {
                var options = $this.data();
                if (typeof options.actions === 'string') options.actions = $.parseJSON(options.actions);
                $this.data('zui.messager', new $.zui.Messager(options.content, options).show());
            }
        })

        $('.messager-example').click(function () {
            var $this = $(this);
            options = $this.data();
            if (typeof options.actions === 'string') options.actions = $.parseJSON(options.actions);
            new $.zui.Messager($this.find('.messager-content').html(), options).show();
        });
    </script>
</body>

</html>